//var plot1;
var expenseChart = ring.create({
    constructor: function(plot) 
    {
        this.plot1 = plot;
    },
    plotChart: function(id, data)
    {
        var that = this;
        if (that.plot1) {
            that.plot1.destroy();
        }
        //data = [[1,3,4,2], [4,5,6,1]];

        that.plot1 = $.jqplot(id, data[1], {
          series:[{renderer:$.jqplot.BarRenderer}],
          stackSeries: true,
          seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {
               barMargin: 30,
               highlightMouseDown: true ,
               showDataLabels: true
            }, 
            pointLabels: {show: true}
          },
          axesDefaults: {
              tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
              tickOptions: {
                fontSize: '10pt'
                }
          },
          axes: {
            xaxis: {
               renderer: $.jqplot.CategoryAxisRenderer,
               ticks: data[0]
            },
            yaxis: {
                padMin: 0    
            }
          },
          legend: {
            show: true,
            location: 'e',
            placement: 'outside'
          } 
        });

    },
    refresh: function(id, categories, url_data) {
        var dateTo   = $('#select-month-to').val(); 
        var dateFrom = $('#select-month-from').val();   
       
        if (categories) {
            categories = categories.join(',');
        } 
        
        var that = this;
        
        $.ajax({
            url: url_data, 
            data: { categories : categories, date_to : dateTo, date_from : dateFrom},
            async: false, 
            success: function(result) 
            {
                that.plotChart(id, result);
            }
        });
        
    }
});
